<template>
  <div class="global-box">
    <div class="title">
      <h1>{{ title }}</h1>
      <a-button type="primary" @click="add()">添加考试预设</a-button>
    </div>
    <a-card :body-style="{ padding: '24px' }" :bordered="false">
      <div class="form-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="课程目录">
                <a-cascader
                  :options="directoryOptions"
                  :load-data="loadData"
                  placeholder="请选择课程目录"
                  change-on-select
                  v-model="queryParam.directory"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="考试次数">
                <a-select v-model="queryParam.type" placeholder="请选择课程类型">
                  <a-select-option value="shanghai"> Zone one </a-select-option>
                  <a-select-option value="beijing"> Zone two </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="search">筛选</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-wrapper">
        <a-table :columns="columns" :data-source="data" :pagination="pagination">
          <span slot="name" slot-scope="text, record">
            <template>
              {{ record.directoryName + '/' + record.examName }}
            </template>
          </span>
          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="handleLook(record)">查看</a>
            </template>
          </span>
        </a-table>
      </div>
    </a-card>
    <a-drawer
      title="查看考试预设"
      width="30%"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form-model :form="modelForm" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
        <a-form-model-item label="课程目录："> </a-form-model-item>
        <a-form-model-item label="考试次数：">
          <span v-for="item in numList" :key="item.value">
            <span v-if="modelForm.number === item.value">{{ item.label }}</span>
          </span>
        </a-form-model-item>
        <a-form-model-item label="考试日期：">{{ modelForm.applyDate }}</a-form-model-item>
        <a-form-model-item label="报名日期：">{{ modelForm.testDate }}</a-form-model-item>
        <a-form-model-item label="成绩公布日期：">{{ modelForm.releaseDate }}</a-form-model-item>
      </a-form-model>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'center',
          zIndex: 1
        }"
      >
        <a-button type="primary" @click="onClose"> 确定 </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { directory, list } from '@/api/examination/preset'
const columns = [
  {
    title: '课程目录ID',
    dataIndex: 'examId',
    align: 'center'
  },
  {
    title: '课程目录',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    align: 'center'
  },
  {
    title: '考试次数',
    dataIndex: 'period',
    align: 'center'
  },
  {
    title: '操作人',
    dataIndex: 'creatorName',
    align: 'center'
  },
  {
    title: '操作时间',
    dataIndex: 'createTime',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
export default {
  data () {
    return {
      visible: false,
      title: '考试预设管理',
      queryParam: {
        directory: [],
        type: ''
      },
      columns,
      data: [],
      pagination: {
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 10, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        onShowSizeChange: (current, pageSize) => {
          this.pagination.defaultCurrent = 1
          this.pagination.defaultPageSize = pageSize
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.pagination.defaultCurrent = current
          this.pagination.defaultPageSize = size
        }
      },
      directoryOptions: [],
      numList: [{
        label: '一年一次',
        value: 1
      }, {
        label: '一年两次',
        value: 2
      }, {
        label: '一年多次',
        value: 3
      }, {
        label: '多年一次',
        value: 4
      }],
      modelForm: {
        directory: '',
        number: '',
        applyDate: '',
        testDate: '',
        releaseDate: ''
      }
    }
  },
  computed: {
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      const data = {
        currentPage: this.pagination.defaultCurrent,
        pageSize: this.pagination.defaultPageSize
      }
      if (this.queryParam.directory[0]) {
        data.directoryId = this.queryParam.directory[0]
      }
      if (this.queryParam.directory[1]) {
        data.examId = this.queryParam.directory[1]
      }
      list(data).then(res => {
        if (res.code === '1') {
          this.pagination.total = res.data.totalSize
          this.data = res.data.rows
          this.data.forEach(item => {
            item.bmEndTimeOne = item.bmEndTimeOne.split(' ')[0]
            item.bmEndTimeTwo = item.bmEndTimeTwo.split(' ')[0]
            item.bmStartTimeOne = item.bmStartTimeOne.split(' ')[0]
            item.bmStartTimeTwo = item.bmStartTimeTwo.split(' ')[0]
            item.cjEndTimeOne = item.cjEndTimeOne.split(' ')[0]
            item.cjEndTimeTwo = item.cjEndTimeTwo.split(' ')[0]
            item.cjStartTimeOne = item.cjStartTimeOne.split(' ')[0]
            item.cjStartTimeTwo = item.cjStartTimeTwo.split(' ')[0]
            item.createTime = item.createTime.split(' ')[0]
            item.ksEndTimeOne = item.ksEndTimeOne.split(' ')[0]
            item.ksEndTimeTwo = item.ksEndTimeTwo.split(' ')[0]
            item.ksStartTimeOne = item.ksStartTimeOne.split(' ')[0]
            item.ksStartTimeTwo = item.ksStartTimeTwo.split(' ')[0]
          })
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 筛选
    search () {
      this.getData()
    },
    // 重置
    reset () {
      this.queryParam = {
        directory: [],
        type: ''
      }
      this.getData()
    },
    // 表格编辑
    handleEdit (record) {
      this.$router.push({
        name: 'presetCommon',
        params: {
          re: record
        }
      })
    },
    // 添加考试预设
    add () {
      this.$router.push({
        name: 'presetCommon'
      })
    },
    // 表格查看
    handleLook (record) {
      this.visible = true
      this.modelForm.directory = record.directoryName + ' / ' + record.examName
      this.modelForm.number = record.examinationType
      this.modelForm.testDate = record.ksStartTimeOne + ' 至 ' + record.ksEndTimeOne
      this.modelForm.applyDate = record.bmStartTimeOne + ' 至 ' + record.bmEndTimeOne
      this.modelForm.releaseDate = record.cjStartTimeOne + ' 至 ' + record.cjEndTimeOne
    },
    // 查看关闭
    onClose () {
      this.visible = false
    },
    // 获取课程目录
    getDirectory () {
      const data = {
        type: 0,
        directoryLevel: 1
      }
      directory(data).then(res => {
        if (res.code === '1') {
          res.data.forEach(item => {
            item.isLeaf = false
          })
          this.directoryOptions = res.data
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 课程目录二级-六级
    loadData (selectedOptions) {
      if (this.queryParam.directory[1]) {
        return false
      }
      const targetOption = selectedOptions[selectedOptions.length - 1]
      const data = {
        type: 1,
        parentId: targetOption.id,
        directoryLevel: 2
      }
      targetOption.loading = true
      directory(data).then(res => {
        if (res.code === '1') {
          if (res.data.length > 0) {
            res.data.forEach(item => {
              item.isLeaf = false
            })
            targetOption.loading = false
            targetOption.children = [...res.data]
          } else {
            targetOption.loading = false
            this.$message.error('暂无更多数据')
          }
        } else {
          targetOption.loading = false
          this.$message.error(res.msg)
        }
        this.directoryOptions = [...this.directoryOptions]
      }).catch(err => {
        this.$message.error(err.msg)
        targetOption.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.form-status-tip {
  text-align: center;
  color: #999;
}
</style>
